<template>
    <div class="user full">
        <div class="portrait" @click="updatePortrait">
            <div class="tit">头像</div>
            <div class="container-align">
                <div class="portrait-img">
                    <img src="../../assets/img/12.png" alt=""/>
                </div>
                <img class="arrow" src="../../assets/img/11.png" alt=""/>
            </div>
        </div>
        <div class="nickname container-align" @click="updateNickname">
            <div class="tit">昵称</div>
            <div class="container-align">
                <div class="value">一路向北</div>
                <img class="arrow" src="../../assets/img/11.png" alt=""/>
            </div>
        </div>
        <div class="user-item container-align">
            <div class="tit">电话</div>
            <div class="value">13584557842</div>
        </div>
        <div class="user-item container-align">
            <div class="tit">积分</div>
            <div class="value">100</div>
        </div>
        <div class="bottom-button">
            <div @click="loginOut">退出登录</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "user",
        methods: {
            updatePortrait () {

            },
            updateNickname () {
                this.$router.push('UpdateNickname')
            },
            loginOut () {

            }
        }
    }
</script>

<style scoped lang="scss">
    .user {
        position: relative;

        .bottom-button {
            position: absolute;
            left: 0;
            bottom: 2.4rem;
            width: 100%;

            > div {
                width: 6.3rem;
                line-height: 0.88rem;
                background: rgba(255, 150, 38, 1);
                border-radius: 0.1rem;
                text-align: center;
                font-size: 0.32rem;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
                margin: 0 auto;
            }
        }

        .tit {
            font-size: 0.3em;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
        }

        .value {
            font-size: 0.28rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .arrow {
            height: 0.25rem;
            width: 0.14rem;
            margin-left: 0.4rem;
        }

        .portrait {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 1.38rem;
            border-bottom: rgba(238, 238, 238, 1) 0.01rem solid;
            border-top: rgba(238, 238, 238, 1) 0.01rem solid;
            padding: 0 0.4rem 0 0.4rem;

            &-img {
                height: 0.8rem;
                width: 0.8rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .nickname {
            height: 1rem;
            border-bottom: rgba(238, 238, 238, 1) 0.01rem solid;
            padding: 0 0.4rem 0 0.4rem;
            justify-content: space-between;
        }

        .user-item {
            height: 1rem;
            border-bottom: rgba(238, 238, 238, 1) 0.01rem solid;
            padding: 0 0.94rem 0 0.4rem;
            justify-content: space-between;
        }
    }
</style>